import React,{Component} from 'react';
import {Row,Col} from 'antd';
import classNames from 'classnames';
import Waypoint from 'react-waypoint';
import Swiper from 'swiper';
import PropTypes from 'prop-types';
import 'swiper/dist/css/swiper.min.css';
import 'animate.css';
import './need.less';
const prefix = 'need';
class Need extends Component{
    state = {
        name:""
    };
    handleWaypointEnter = () =>{
        this.setState({
            name:"fadeInRight"
        })
    };
    handleWaypointLeave = () =>{
        this.setState({
            name:"fadeInRight"
        })
    };
    slideStart = () =>{
        var mySwiper = new Swiper ('.swiper-box', {
            autoplay : 2000,
            slidesPerView :'auto',
            spaceBetween:20,
            loop : true,
            pagination: '.swiper-pagination'
        })
    };
    componentDidMount(){
        this.slideStart();
    };
    componentDidUpdate(){
        if(window.innerWidth<1024){
            this.slideStart();
        }
        return null;
    };
    render(){
        let {title,source,background} = this.props;
        let backStyle = (function () {
            if (background.match(/#[A-Z,a-z,0-p]+/g)) {
                return background;
            } else {
                return `url(${background}) no-repeat center`;
            }
        })();
        return(
            <div className={classNames(prefix,'clearfix')} style={{background:backStyle,overflow:'hidden'}}>
                <div className={prefix+'-container'}>
                    <h1>{title}</h1>
                    <Row type="flex" justify="center" align="top" gutter={100}>
                        <Waypoint
                            onEnter={this.handleWaypointEnter}
                            onLeave={this.handleWaypointLeave}
                        />
                        {
                            source.map((value,index)=>{
                                if(value.img){
                                    return (
                                        <Col key={index}
                                             className={classNames(prefix + '-block-copy', 'animated', this.state.name)}
                                             style={{animationDelay: `${index / 10}s`}}>
                                            <img src={value.img} alt=""/>
                                            <div className={prefix+"-copy-content"}>
                                                <span className={prefix+'-copy-index'}>{value.index}</span>
                                                <p className={prefix+'-copy-des'}>{value.content}</p>
                                            </div>
                                        </Col>
                                    )
                                }else {
                                    return (
                                        <Col key={index}
                                             className={classNames(prefix + '-block', 'animated', this.state.name)}
                                             style={{animationDelay: `${index / 10}s`}}>
                                            <p className={prefix + '-index'}>{value.index}</p>
                                            <p className={prefix + '-content'}>{value.content}</p>
                                        </Col>
                                    )
                                }
                            })
                        }
                    </Row>
                </div>
            </div>
        )
    }
}
export default Need;
Need.propTypes = {
  title:PropTypes.string.isRequired,
  source:PropTypes.array.isRequired,
    background:PropTypes.string
};
Need.defaultProps = {
    background:'#fff'
};